<template>
  <div class="page">
    <Header title="确认订单" :back="true" />
    <div class="hotel">
      <div class="img_bg">
        <img style="width:100%" src="/src/assets/images/index/scenic_bg.png" alt="">
      </div>
      <div class="commodity_information">
        <div class="commodity_information_img_box">
          <div class="img_box">
            <template v-if="!loading">
              <van-image lazy-load width="100%" height="100%" :src="`${fileUrl}/${orderiofos?.goodsTickets?.productImage}`" radius=".8rem" />
            </template>
            <van-skeleton v-else>
              <template #template>
                <div :style="{ display: 'flex', width: '100vw' }">
                  <van-skeleton-image :style="{ width: '100%', height: '8.7rem' }" />
                </div>
              </template>
            </van-skeleton>
          </div>
          <div class="round round_left" />
          <div class="round round_right" />
        </div>
        <div class="order_info">
          <template v-if="!loading">
            <div class="order_info_time">
              <div class="order_info_header">
                {{ orderiofos.goodsTickets?.ticketName }}
              </div>
              <div class="tab_list">
                <div v-if="orderiofos.goodsTickets?.refundType === 0" class="cancel">
                  <span>不可取消</span>
                  <div class="line" />
                </div>
                <span v-if="orderiofos?.goodsTickets?.validDays">
                  有效期至：{{getDateAfterNDays(orderiofos?.goodsTickets.validDays)}}
                </span>
                <span v-else-if="orderiofos?.goodsTickets?.validStartTime && orderiofos?.goodsTickets?.validEndTime">
                  可约日期：{{`${splitTime(orderiofos?.goodsTickets?.validStartTime)} ~ ${splitTime(orderiofos?.goodsTickets?.validEndTime)}`}}
                </span>
              </div>
            </div>
          </template>
          <van-skeleton v-else>
            <template #template>
              <div :style="{ display: 'flex', width: '100%' }">
                <div :style="{ flex: 1}">
                  <van-skeleton-paragraph row-width="60%" />
                  <van-skeleton-paragraph />
                </div>
              </div>
            </template>
          </van-skeleton>
        </div>
      </div>
    </div>
    <div class="bottom_pay">
      <div class="bottom_pay_content">
        <template v-if="!loading">
          <div class="pay_button" @click="handelpay">
            支付
          </div>
          <div class="price_box">
            应付金额：
            <span class="price">
            ￥
            <span class="number">
              {{ orderiofos.goodsTickets?.marketPrice }}
            </span>
          </span>
          </div>
        </template>
        <van-skeleton v-else>
          <template #template>
            <div :style="{ display: 'flex', width: '50vw', margin: 'auto', }">
              <div :style="{ flex: 1}">
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
              </div>
            </div>
          </template>
        </van-skeleton>
      </div>
    </div>
  </div>
</template>
<script setup >
import { ref } from 'vue'
import Header from '@/components/header/Header.vue'
import api from '@/api/index.js'
import pay from '@/utils/pay.js'

const fileUrl = import.meta.env.VITE_FILE_URL
import { useRoute } from "vue-router"
const route = useRoute()
let id = route?.query?.id
let price = route?.query?.dateS
const orderiofos = ref([])

const splitTime = (time) => {
  return time.split('T')[0]
}
const getDateAfterNDays =(n) => {
  const today = new Date()
  today.setDate(today.getDate() + n)
  const year = today.getFullYear()
  const month = (today.getMonth() + 1).toString().padStart(2, '0')
  const day = today.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day} 23:59:59`
}


// 创建酒店订单获取订单号  {
function handelpay() {
    const data = {
        goodsDto: {
            buyCount: 1,
            skuId: id,
        },
    }

    api.gethotelpotsave(data).then((res) => {
        if (res.code === '200') {
            if (res.data) {
                pay.getPayld({ orderNumber: res.data, type: 'hotel' })
            }

        }
    })
        .finally(() => { });
}


const loading = ref(false)
// 更具id获取酒店详细
const getthotelDetailInfo = () => {
  loading.value = true
    const params = {
        businessId: id,
    };
    api.gethotelpot(params).then((res) => {
        if (res.code == 200) {
            orderiofos.value = res.data
            console.log("酒店详细", res.data);

        }
    }).finally(() => {
      loading.value = false
    });
};
getthotelDetailInfo();

</script>
<style lang="scss" scoped>
:deep(.van-skeleton) {
  padding: 0;
}
.page{
  display: flex;
  flex-direction: column;
  height: 100vh;
  .hotel {
    position: relative;
    flex: 1;
    background: #F9F8F3;
    .img_bg{
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 10vh;
    }
    .commodity_information{
      margin: 2.4rem 1.5rem 1.5rem 1.5rem;
      border-radius: 1rem;
      overflow: hidden;
      .commodity_information_img_box{
        position: relative;
        background: #ffffff;
        padding: 0 1.5rem;
        .img_box{
          height: 8.7rem;
          padding: 1.5rem 0;
          border-bottom: 1px dashed #eeeeee;
        }
        .round{
          position: absolute;
          bottom: 0;
          width: 2.4rem;
          height: 2rem;
          background-color: #F9F8F3;
          border-radius: 50%;
        }
        .round_left{
          left: 0;
          transform: translateX(-50%) translateY(50%);
        }
        .round_right{
          right: 0;
          transform: translateX(50%) translateY(50%);
        }
      }
      .order_info{
        background: #ffffff;
        padding: 1.2rem 1.5rem 1.5rem 1.5rem;
        .order_info_header{
          font-size: 1.8rem;
          font-weight: bold;
          color: #333333;
          line-height: 2.5rem;
          margin-bottom: .6rem;
        }
        .tab_list{
          display: flex;
          flex-wrap: wrap;
          .cancel{
            display: flex;
            .line{
              width: .1rem;
              height: 1.4rem;
              background: #D9D9D9;
              margin: 0 .5rem;
            }
          }
        }
        .order_info_time{
          margin-top: 0.6rem;
          font-size: 1.4rem;
          color: #999999;
          line-height: 1.6rem;
        }
      }
    }

    .hotel-info {

      height: 100%;
      width: 100%;
      background: #F9F8F3;

      .infos {
        height: 32rem;
        width: 90%;
        margin-left: 5%;
        border-radius: 1rem;
        background-color: #ffffff;
        margin-top: -8rem;
        position: absolute;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        div {
          height: 15rem;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

        }

        .yuan {
          position: absolute;
          height: 2rem;
          width: 100%;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          justify-content: center;

          .yuan-1 {
            //  border: 1px solid red;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: #F9F8F3;

          }

          .yuan-line {
            height: 0px;
            border: 1px dashed #EEEEEE;
          }
        }

        .hotel-time {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .hotel-name {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #333333;
            font-size: 16px;
            font-weight: 600;
            width: 95%;
            display: flex;
            flex-wrap: wrap;
          }

          .hotel-name1 {
            display: flex;
            align-items: start;
            justify-content: flex-start;
            width: 95%;
            flex-wrap: wrap;
            font-size: 1.4rem;
            font-weight: normal;
            color: #999999;
          }
        }
      }
    }
  }
  .bottom_pay{
    z-index: 1;
    height: 9rem;
    background-color: #FFFFFF;
    .bottom_pay_content{
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      padding: 1rem 2rem 0 0;
      box-sizing: border-box;
    }
    .pay_button{
      height: 3.8rem;
      line-height: 3.8rem;
      background: var(--van-primary-color);
      border-radius: .5rem;
      opacity: 1;
      font-size: 1.6rem;
      color: #FFFFFF;
      padding: 0 3rem;
      margin-left: 1rem;
      white-space: nowrap;
    }
    .pay_button:active{
      background-color: var(--van-primary-button-active-color);
    }
    .price_box{
      display: flex;
      align-items: center;
      font-size: 1.4rem;
      color: #999999;
      .price{
        font-size: 1.4rem;
        color: #ED6316;
        line-height: 1.6rem;
        font-weight: bold;
        .number{
          font-size: 2.2rem;
          font-weight: bold;
          color: #ED6316;
          line-height: 2.6rem;
        }
      }
    }
  }
}
</style>